import 'package:flutter/material.dart';

class TabBarControllerPage extends StatefulWidget {
  TabBarControllerPage({Key key}) : super(key: key);

  @override
  _TabBarControllerPageState createState() => _TabBarControllerPageState();
}
/**
 *
 *
    with是dart的关键字，意思是混入的意思，
    就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类，
    避免多重继承导致的问题。
    SingleTickerProviderStateMixin 主要是我们初始化TabController时， (TickerProviderStateMixin)  有人说动态设置标签实现这个类
    需要用到vsync ，垂直属性，然后传递this
*/

class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin {
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TabController(initialIndex: 0, vsync: this, length: 10);
    //监听tab 改变
    _controller.addListener(() {
      print(_controller.index);
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text("TabControllerPage"),
          elevation: 0,
          //bottom:
        ),
        body:Column(
            children: <Widget>[
              // Container(
              //   height: 200,
              //   color: Colors.redAccent,
              // ),
              Container(
                color: Colors.red,
                height: 50.0,
                alignment: Alignment.center,
                child: TabBar(
                  controller: this._controller,
                  isScrollable: true, //如果多个按钮的话可以滑动
                  indicatorColor: Colors.yellow,
                  labelColor: Colors.yellow,
                  unselectedLabelColor: Colors.white,
                  indicatorSize: TabBarIndicatorSize.label,
                  tabs: <Widget>[
                    Text("热销1"),
                    Text("热销2"),
                    Text("热销3"),
                    Text("热销4"),
                    Text("热销5"),
                    Text("热销6"),
                    Text("热销7"),
                    Text("热销8"),
                    Text("热销9"),
                    Text("热销10"),
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Scrollbar(
                  child: TabBarView(
                    controller: _controller,
                    children: <Widget>[
                      ListViewContnet(title: 1111111111111),
                      ListViewContnet(title: 22222222222222),
                      ListViewContnet(title: 3333333333333333),
                      ListViewContnet(title: 444444444444444),
                      ListViewContnet(title: 555555555555555555),
                      ListViewContnet(title: 6666666666666666),
                      ListViewContnet(title: 7777777777777777777),
                      ListViewContnet(title: 88888888888888888),
                      ListViewContnet(title: 99999999999999),
                      ListViewContnet(title: 1000000000000),
                    ],
                  ),
                )

              )
            ],
          )
    );
  }
}

class ListViewContnet extends StatefulWidget {
  final int title;
  ListViewContnet({Key key, this.title}) : super(key: key);

  @override
  _ListViewContnetState createState() => _ListViewContnetState();
}

//混入AutomaticKeepAliveClientMixin，这是保持状态的关键
//然后重写wantKeppAlive 的值为true。
class _ListViewContnetState extends State<ListViewContnet> with AutomaticKeepAliveClientMixin {

  bool isLoading = false;
  bool noMoredata = false;
  ScrollController scrollController = ScrollController();
  int dataLength = 20;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print(".....................");
    // 给列表滚动添加监听
    this.scrollController.addListener(() {
      //print(this.scrollController.position.pixels);
      // 滑动到底部的关键判断
      if (
        !this.isLoading &&
        this.scrollController.position.pixels >= this.scrollController.position.maxScrollExtent
      ) {
        print("到底了");
        setState(() {
          this.isLoading = true;
        });
        Future.delayed(Duration(seconds: 1), () {
          //Toast.show('当前已是最新数据', context);
          print("加载完成");
          if(dataLength < 50){
            setState(() {
              dataLength += 5;
            });
          }else{
            setState(() {
              noMoredata = true;
            });
          }
          this.isLoading = false;
        });
      }
    });
  }

  Future onRefresh() {
    print("刷新");
    return Future.delayed(Duration(seconds: 1), () {
      //Toast.show('当前已是最新数据', context);
      print("当前已是最新数据");
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: this.onRefresh,
      child: ListView.separated(
        controller: this.scrollController,
        itemCount: dataLength + 1,
        itemBuilder: (context, index) {
          if(index < dataLength ){
            return
            Padding(
              padding: EdgeInsets.fromLTRB(20.0, 0, 20, 0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "平时可能多数是使用box-shadow实现一个简单的阴影，但是blur也可以哦。在一张图下面，还是放这张图，然后加上blur模糊，再偏移一点点，不就是一个阴影了(彩色阴影哦)",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF333333),
                          ),
                        ),
                        Padding(padding: EdgeInsets.only(top: 3)),
                        Row(
                          children: <Widget>[
                            Text(
                              '模糊阴影   10评论',
                              style: TextStyle(
                                fontSize: 13,
                                color: Color(0xFF999999),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 16)),
                  Image.network(
                    "https://www.itying.com/images/flutter/4.png",
                    width: 100,
                    height: 60,
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            );
          }else{
            return renderBottom();
          }
        },
        separatorBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.fromLTRB(20.0, 0, 20, 0),
            child: Divider(
              height: 16,
              indent: 0,
              color: Colors.black12,
            ),
          );
        },
      ),
    );
  }
  Widget renderBottom() {
    if(!this.noMoredata){
      if(this.isLoading) {
        return Container(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '努力加载中...',
                style: TextStyle(
                  fontSize: 15,
                  color: Color(0xFF333333),
                ),
              ),
              Padding(padding: EdgeInsets.only(left: 10)),
              SizedBox(
                width: 20,
                height: 20,
                child: CircularProgressIndicator(strokeWidth: 3),
              ),
            ],
          ),
        );
      } else {
        return Container(
          padding: EdgeInsets.symmetric(vertical: 15),
          alignment: Alignment.center,
          child: Text(
            '上拉加载更多',
            style: TextStyle(
              fontSize: 15,
              color: Color(0xFF333333),
            ),
          ),
        );
      }
    }else{
      return Container(
          padding: EdgeInsets.symmetric(vertical: 15),
          alignment: Alignment.center,
          child: Text(
            '-没有更多了-',
            style: TextStyle(
              fontSize: 15,
              color: Color(0xFF333333),
            ),
          ),
        );
    }
  }
  @override
  bool get wantKeepAlive => true;
}
